/**
* Created by baixiyang on 2017/8/22.
* it-object-table 用于分多行显示object,例如
*             key: value   key: value    key: value
*             key: value   key: value    key: value
*             key: value   key: value
* 用法：props:
* col(number) 表示每行显示几列
* data(object) 传入要显示的object
* keyRatio(object) key 的显示比例
* keys 要筛选显示的字段数组，如果不穿就会默认显示全部, ['a', '标签a', 'b'], 第三个参数为a字段值里面的字段。b就是a.b 的意思。第三个参数还能传一个render fn
* mode 显示模式（horizontal or vertical），默认是horizontal
* lineHeight 行高,可以不设置.设置了后可以使用height.sync 取得高度
* keyFormatter(function),valueFormatter(function) 可格式化key,value;
*   例：
*
*      function (h, value,key) {
*        return h("div",{},[key])
*      }
*
*
*/
<script type='text/javascript'>
import _ from 'lodash'

export default {
  name: 'object-table',
  render: function (h) {
    let that = this
    let tdStyle = this.tdStyle
    let thStyle = this.thStyle
    if (this.lineHeight) {
      Object.assign(tdStyle, {
        height: '' + this.lineHeight + 'px'
      })
      Object.assign(thStyle, {
        height: '' + this.lineHeight + 'px'
      })
    }
    let getValue = (data, arr) => {
      if (arr[2]) {
        if (typeof arr[2] === 'string') {
          return _.at(data, arr[0] + '.' + arr[2])[0]
        } else if (typeof arr[2] === 'function') {
          return arr[2](h, data[arr[0]])
        }
      } else {
        return data[arr[0]]
      }
    }

    if (!that.mode || that.mode === 'horizontal') {
      let getCol = () => {
        var result = []
        for (var i = 0; i < that.col; i++) {
          let styleTh = `width:${that.keyRatio / that.col * 100}%`
          let styleTd = `width:${(1 - that.keyRatio) / that.col * 100}%`
          result.push(h('col', { style: styleTh }, []))
          result.push(h('col', { style: styleTd }, []))
        }
        return result
      }

      let getTr = () => {
        let res = []
        let currentGroup = []
        let keys = that.keys || _.map(Object.keys(that.data), one => [one])

        keys.forEach((arr, i) => {
          if (that.keyFormatter) {
            currentGroup.push(h('th', {
              class: 'imes-object-table-th',
              style: thStyle
            }, [that.keyFormatter(h, that.data[arr[0]], arr[0])]))
          } else {
            currentGroup.push(h('th', { class: 'imes-object-table-th', style: thStyle }, [`${arr[1] || arr[0]}:`]))
          }
          if (that.valueFormatter) {
            currentGroup.push(h('td', {
              class: 'imes-object-table-td',
              style: tdStyle
            }, [that.valueFormatter(h, that.data[arr[0]], arr[0])]))
          } else {
            currentGroup.push(h('td', { class: 'imes-object-table-td', style: tdStyle }, [getValue(that.data, arr)]))
          }
          if (i === keys.length - 1 && i % that.col !== (that.col - 1)) {
            let num = that.col - 1 - (i % that.col)
            for (let i = 0; i < num; i++) {
              currentGroup.push(h('th', { class: 'imes-object-table-th', style: thStyle }, ['']))
              currentGroup.push(h('td', { class: 'imes-object-table-td', style: tdStyle }, ['']))
            }
          }
          if (i % that.col === (that.col - 1) || i === keys.length - 1) {
            res.push(h('tr', {}, currentGroup))
            currentGroup = []
          }
        })
        return res
      }
      let trs = getTr()
      if (this.lineHeight) {
        this.$emit('update:height', trs.length * this.lineHeight)
      }
      return h('table', {
        class: 'imes-object-table',
        style: { width: '100%', fontSize: this.fontSize, color: this.color }
      }, [h('colgroup', {}, getCol()), ...trs])
    } else if (that.mode === 'vertical') {
      let getCol = () => {
        var result = []
        for (var i = 0; i < that.col; i++) {
          let style = `width:${100 / that.col}%`
          result.push(h('col', { style: style }, []))
        }
        return result
      }
      let getTr = () => {
        let res = []
        let currentGroupTh = []
        let currentGroupTd = []
        let keys = that.keys || _.map(Object.keys(that.data), one => [one])

        keys.forEach((arr, i) => {
          if (that.keyFormatter) {
            currentGroupTh.push(h('th', {
              class: 'imes-object-table-th',
              style: thStyle
            }, [that.that.keyFormatter(h, that.data[arr[0]], arr[0])]))
          } else {
            currentGroupTh.push(h('th', { class: 'imes-object-table-th', style: thStyle }, [`${arr[1] || arr[0]}:`]))
          }
          if (that.valueFormatter) {
            currentGroupTd.push(h('td', {
              class: 'imes-object-table-td',
              style: tdStyle
            }, [that.valueFormatter(h, that.data[arr[0]], arr[0])]))
          } else {
            currentGroupTd.push(h('td', { class: 'imes-object-table-td', style: tdStyle }, [getValue(that.data, arr)]))
          }
          if (i === keys.length - 1 && i % that.col !== (that.col - 1)) {
            let num = that.col - 1 - (i % that.col)
            for (let i = 0; i < num; i++) {
              currentGroupTh.push(h('th', { class: 'imes-object-table-th', style: thStyle }, ['']))
              currentGroupTd.push(h('td', { class: 'imes-object-table-td', style: tdStyle }, ['']))
            }
          }
          if (i % that.col === (that.col - 1) || i === keys.length - 1) {
            res.push(h('tr', {}, currentGroupTh))
            res.push(h('tr', {}, currentGroupTd))
            currentGroupTh = []
            currentGroupTd = []
          }
        })
        return res
      }
      let trs = getTr()
      if (this.lineHeight) {
        this.$emit('update:height', trs.length * this.lineHeight)
      }
      return h('table', {
        class: 'imes-object-table',
        style: { width: '100%', fontSize: this.fontSize, color: this.color }
      }, [h('colgroup', {}, getCol()), ...trs])
    }

    return undefined
  },
  data() {
    return {}
  },
  props: {
    tdStyle: {
      default: {}
    },
    thStyle: {
      default: {}
    },
    color: {
      type: String,
      default: '#555'
    },
    fontSize: {
      type: String,
      default: '1rem'
    },
    col: {
      type: Number
    },
    data: {
      type: Object
    },
    keyRatio: {
      type: Number
    },
    keys: {
      type: Array
    },
    mode: {
      type: String
    },
    keyFormatter: {
      type: Function
    },
    valueFormatter: {
      type: Function
    },
    lineHeight: {
      type: Number
    },
    height: {
      type: Number
    }
  }
}
</script>
<style lang="scss">
  .imes-object-table {
    width: 100%;
  }
</style>
